@import "../../assets/scss/core/base";

.#{$jigsaw-prefix}-rate {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    &-disabled &-star {
        cursor: not-allowed;
        &:hover {
            transform: scale(1);
        }
    }
    &-star {
        padding: 0;
        display: inline-block;
        margin: 0 8px 0 0;
        position: relative;
        transition: all .3s;
        color: #e9e9e9;
        cursor: pointer;

        &-first,
        &-second {
            user-select: none;
            transition: all .3s;
        }

        &:hover {
            transform: scale(1.1);
        }

        &-first {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
        }

        &-half &-first,
        &-half &-second {
            opacity: 1;
        }

        &-half &-first,
        &-full &-second {
            color: #f5a623;
        }

        &-half:hover &-first,
        &-full:hover &-second {
            color: #f5a623;
        }
    }
}

